<template>
	<view 
	@click="searchBoxhandle()"
	class="my_search_container" :style="{ 'background-color': bgColor}">
		<view class="my_search_box" :style="{ 'border-radius':radius+'px' }">
			<!-- 使用uniapp 提供的图标组件 -->
			<uni-icons type="search" size="17"></uni-icons>
			<text class="placeholder">搜索</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "search",
		data() {
			return {

			};
		},props:{
			bgColor:{
				type:String,
				default:'#C00000'
			},
			radius:{
				type:Number,
				default:18
			}
			
		},methods:{
			searchBoxhandle(){
				this.$emit("myclick")
			}
		}
	}
</script>

<style lang="scss">
	// 这种方法 在滚动到底部的时候 会有上滑的问题
	// .my_search_container {
	// 	background-color: #C00000;
	// 	padding: 10px;
	// 	height: 40px;

	// 	.my_search_box {
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: center;
	// 		height: 100%;

	// 		border-radius: 15rpx;
	// 		background-color: #FFFFFF;

	// 		.placeholder {
	// 			font-size: 15px;
	// 			margin-left: 5px;
	// 		}
	// 	}
	// }
	
	.my_search_container {
		//使用
	  // background-color: #c00000;
	  height: 50px;
	  padding: 0 10px;
	  display: flex;
	  align-items: center;
	}
	
	.my_search_box {
	  height: 36px;
	  background-color: #ffffff;
	  
	  // border-radius: 15px;
	  width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	
	  .placeholder {
	    font-size: 15px;
	    margin-left: 5px;
	  }
	}
</style>
